<template>
  <div class="box">
    <!-- 输入按钮按钮 -->
    <div class="top">
      <el-input
        v-model="obj.keyword"
        placeholder="根据用户名输入"
        size="small"
        class="input_top"
      ></el-input>
      <el-button size="small" class="button_left" @click="empty"
        >清空</el-button
      >
      <el-button type="primary" size="small" class="button_body" @click="search"
        >搜索</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-edit"
        size="medium"
        class="button_rt"
        @click="xinzeng('app')"
        >新增权限组</el-button
      >
    </div>
    <!-- body -->
    <el-row class="bodybody">
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark el-icon-info tubiao">
          共{{ permissionsList.counts }}条记录
        </div></el-col
      >
    </el-row>
    <!-- 表格 -->

    <el-table
      class="table_top"
      ref="multipleTable"
      :data="tableData1"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="300px"> </el-table-column>
      <el-table-column prop="title" label="姓名" width="300px">
      </el-table-column>
      <el-table-column label="日期" prop="create_date" width="500px" sortable>
      </el-table-column>
      <el-table-column
        class="caozuo"
        label="操作"
        header-align="center"
        align="center"
      >
        <template #default="{ row }">
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            class="table_left"
            @click="bianji(row.id, 'add')"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            class="table_rt"
            @click="del(row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="foot">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="obj.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="obj.pagesize"
          layout=" prev, pager, next,sizes,jumper"
          :total="permissionsList.counts"
          background
        >
        </el-pagination>
      </div>
    </div>

    <!-- 弹窗 -->

    <el-dialog
      :title="ruleForm.username ? '编辑权限组' : '新增权限组'"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <el-form
        :model="ruleForm"
        status-icon
        ref="form"
        label-width="100px"
        class="demo-ruleForm"
        :rules="rules"
      >
        <el-form-item label="用户名" class="from_input" prop="username">
          <el-input v-model="ruleForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-tree
          :props="props"
          :load="loadNode"
          lazy
          show-checkbox
          @check-change="handleCheckChange"
        >
        </el-tree>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button @click="tijiao" type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, update, remove } from '@/api/base/users.js'
import { list as listlist, remove as dell, simple } from '@/api/base/permissions.js'

export default {
  name: 'Card',
  components: {},
  data () {
    return {
      permissionsList: '',
      depts: [{
        name: '传智教育',
        children: [
          { name: '总裁办' },
          { name: '行政部' },
          { name: '财务部' }
        ]
      }],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      tableData1: [],
      inputinput: '',
      multipleSelection: [],
      dialogVisible: false,
      input: '',
      list: 0,
      tableData: [],
      obj: {
        page: 1,
        pagesize: 10,
        keyword: null
      },
      PermissionGroupsList: [123, 456],
      panduan: '',
      ruleForm: {
        username: '',
        email: '',
        password: '',
        role: '',
        permission_group_id: '',
        phone: '',
        introduction: ''
      },
      liebiao: '',
      form: {
        type: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 5,
            max: 11,
            message: '用户名长度在 5 到 11 个字符',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            pattern: /^\w{5,10}$/,
            message: '密码长度在 5 到 10 个字符',
            trigger: 'blur'
          }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          {
            min: 5,
            max: 11,
            message: '用户名长度在 5 到 11 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // 权限列表获取
    async render () {
      const { data } = await listlist(this.obj)
      this.tableData1 = data.list
      this.permissionsList = data
      console.log(data)
    },
    handleCheckChange () {},
    handleSelectionChange () {},
    async xinzeng (app) {
      this.dialogVisible = true
      this.panduan = app
      const data = await simple()
      console.log(data)
      this.depts = data
    },
    // 权限删除
    async del (id) {
      console.log(id)
      dell({ id })
      const res = this.render()
      console.log(res)
      this.$message.success('删除成功')
    },
    // 权限清空
    empty () {
      this.obj.title = null
      this.render()
    },
    // 权限搜索
    async search () {
      this.render()
    },
    async sousou () {
      // console.log(this.tableData)
      // this.tableData = this.tableData.includes(this.input)
      const { data } = await list(this.obj)
      // console.log(data)
      this.tableData = data.list
      this.tableData = this.tableData.filter(item => {
        return item.username.includes(this.input)
      })
      this.input = ''
      // console.log(res)
    },
    async qing () {
      const { data } = await list(this.obj)
      // console.log(data)
      this.list = data.counts
      this.tableData = data.list
    },
    async bianji (id, add) {
      this.panduan = add
      this.tijiao(id)
      // console.log(id)
    },
    async tijiao (id) {
      console.log(id)
      // const tijiaoObj = {
      //   page: this.obj.page,
      //   pagesize: this.obj.pagesize,
      //   username: this.ruleForm.username
      // }
      if (this.panduan === 'app') {
        await this.$refs.form.validate()
        await add(this.ruleForm)
        // console.log(res)
        const { data } = await list(this.obj)
        // console.log(data)
        this.list = data.counts
        this.tableData = data.list
        // this.$refs.form.resetFields()
        this.dialogVisible = false
        this.ruleForm.username = ''
        this.ruleForm.email = ''
        this.ruleForm.password = ''
        this.ruleForm.role = ''
        this.ruleForm.permission_group_id = ''
        this.ruleForm.phone = ''
        this.ruleForm.introduction = ''
      }
      if (this.panduan === 'add') {
        this.dialogVisible = true
        console.log(id)
        console.log(this.tableData)
        const res = this.tableData.find(item => item.id === id)
        console.log(res)

        this.ruleForm.username = res.username
        this.ruleForm.email = res.email
        this.ruleForm.password = ''
        this.ruleForm.role = res.role
        this.ruleForm.permission_group_id = res.permission_group_id
        this.ruleForm.phone = res.phone
        this.ruleForm.introduction = res.introduction
        const addadd = await update({
          id,
          ...this.ruleForm
        })
        console.log(addadd)
        // this.dialogVisible = false
        const { data } = await list(this.obj)
        // console.log(data)
        this.list = data.counts
        this.tableData = data.list
      }
    },
    async handleSizeChange (val) {
      //   console.log(`每页 ${val} 条`)
      this.obj.pagesize = val
      this.obj.page = 1
      this.render()
    },
    async handleCurrentChange (val) {
      //   console.log(`当前页: ${val}`)
      this.obj.page = val
      this.render()
    }
  },
  async created () {
    this.render()
  },
  handleClose (done) {
    this.$confirm('确认关闭？')
      .then(_ => {
        done()
      })
      .catch(_ => {})
  }
}
</script>

<style scoped lang="less">
body {
  background-color: #f0f2f5;
  padding: 18px;
}
.box {
  margin: 20px;
  padding: 18px;
  background-color: #fff;
  .top {
    .input_top {
      width: 200px;
      height: 12px;
    }
    .button_left {
      margin: 0 4px 0 16px;
    }
    .button_rt {
      margin-left: 790px;
      background-color: #67c23a;
      border: 0px;
      font-size: 13px;
    }
  }
}
.bodybody {
  width: 100%;
  background-color: #f4f4f5;
  margin-top: 16px;
  line-height: 35px;
  height: 35px;
  border-radius: 5px;
  .tubiao {
    margin-left: 18px;
    color: #909399;
    font-size: 13px;
  }
}
.table {
  font-size: 14px;
  margin-top: 20px;
  .table_left {
    background-color: #ecf5ff;
    color: #459eff;
    border: 0.5px solid #459eff;
  }
  .table_left:hover {
    background-color: #409eff;
    color: #fff;
  }
  .table_rt {
    background-color: #fef0f0;
    color: #f66c96;
    border: 0.5px solid #f66c96;
  }
  .table_rt:hover {
    background-color: #f56c6c;
    color: #fff;
  }
}
.foot {
  height: 55px;
  background-color: #fff;
  .block {
    float: right;
    margin-right: 40px;
    margin-top: 20px;
  }
}
// 弹窗
.demo-ruleForm {
  .from_input {
    width: 380px;
    margin: 0 135px;
    margin-bottom: 22px;
  }
}

.table_top {
  margin-top: 25px;
}
// .dialog-footer {
//   width: 30px;
// }
</style>
